<template>
	<view class='newCar-page'>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">
				<text class="nav-title nav-title-selected"></text>
			</block>
		</cu-custom>
		<addressSearchFixed :placeholderName="objSelect.name" ref="setAddres" @inputPhone="kongInput" @searchBtn='event_clickSearchBtn'
			:isShowAddress="false">
		</addressSearchFixed>

		<view class='newEnergy-backgourd' :style="{top: SeachBar + CustomBar + 'px',height: 'calc(100% - '+ (SeachBar+CustomBar) +'px)'}">
			<view class='newEnergy-flex'>
				<view class="collapse" v-for="(item, index) in itemList" :key="index">
					<view>
						<view class="coll-header">
							<view class="sub-num"  @click="changeContent(item, index)">
								<text v-if='index == 0' :style='{
									color: item.open ? "#2D56C5" : ""
								}'>
									{{ AllVehicUname ? AllVehicUname : item.subnum }}
								</text>
								<text v-if='index == 1' :style='{
									color: item.open ? "#2D56C5" : ""
								}'>
									<!-- 	<text>{{waiguanItems.name ? waiguanItems.name : item.subnum.slice(0,2)}}/{{neishiItems.name ? neishiItems.name :item.subnum.slice(3,5)}}</text> -->
									<text>{{ waiguanItems.name ? waiguanItems.name : item.subnum }}/{{ neishiItems.name ?
										neishiItems.name : item.subnum1 }}</text>
									<!-- {{waiguanItems.name || neishiItems.name? waiguanItems.name +'/'+ neishiItems.name : item.subnum}} -->
								</text>
								<text v-if='index == 2' :style='{
									color: item.open ? "#2D56C5" : ""
								}'>
									{{ cityItemsA.name ? cityItemsA.name : item.subnum }}
								</text>
								<!-- 	<image src="@/static/downArrorw-black.png" mode="" style='width: 30rpx;height:16rpx'>
								</image> -->
								<!--   -->
								<image :src="!item.open ? '/static/downArrorw-black.png' : '/static/shangjiantou.png'"
									style='width: 30rpx;height:16rpx; margin-left:10rpx'></image>
							</view>
						</view>
						<!-- 展开 -->
						<view class="box" style='z-index: 2;' :class="item.open == true ? 'animate' : ''">
							<view class="box-cont" v-if="item.open == true && selectID == 0">
								<view class="allchexingm" @click="quanbuchexingm(AllVehic, item)">
									<text class="allchexingm-text1">{{ AllVehic.name }}</text>
									<text class="allchexingm-text2">{{ AllVehic.num }}条</text>
								</view>
								<view v-for='items in AllVehic.value' :key='items.name'>
									<view @click.stop='AllVehiconclick(it, item)' class='flex-box' v-for='it in items.value'
										:key='it.id'>
										<view class='flex-title'>
											{{ it.name }}
										</view>
										<view class='flex-num'>
											{{ it.num }}条
										</view>
									</view>
								</view>
							</view>
							<view class="box-cont" v-if="item.open == true && selectID == 1">
								<!-- 外观 -->
								<view style='padding: 0rpx 30rpx'>
									<view class='waiguan-title'>外观</view>
									<uni-row class="demo-uni-row" :width="nvueWidth">
										<uni-col :span="6" v-for='(waiguan, waiguanIndex) in AppearanceStyle.interior '>
											<view class="demo-uni-col dark">
												<!-- waiguanIndex == waiguanIndexs  ? "active-btn-color" : "activeRese-btn-color" -->
												<view ref="element" @click='activeWaiguan(waiguan, waiguanIndex, $event)'
													class='waiguan-btn' id="btnwaiguan"
													:class='{ "active-btn-color": waiguan.isFlag }'>
													<view class='waiguan-title-style'>
														<text style='padding-left:13rpx'>{{ waiguan.name }}</text><br />
														<text class='waiguan-line'></text><text
															style="margin-top:5rpx; margin-left: 12rpx; display: block;">{{
																waiguan.num }}</text><text class='waiguan-line'></text>
													</view>
													<view>

													</view>

												</view>

											</view>
										</uni-col>
									</uni-row>
								</view>
								<!-- 内饰 -->
								<view style='padding: 20rpx 30rpx'>
									<view class='waiguan-title'>内饰</view>
									<uni-row class="demo-uni-row" :width="nvueWidth">
										<uni-col :span="6" v-for='(neishi, waiguanIndex) in AppearanceStyle.appearance '>
											<view class="demo-uni-col dark">
												<view class='waiguan-btn' @click='activeNeishi(neishi, waiguanIndex)'
													:class='{ "active-btn-color": neishi.isFlag }'>
													<view class='waiguan-title-style'>
														<text style='padding-left:13rpx'>{{ neishi.name }}</text><br />
														<text class='waiguan-line'></text><text
															style="margin-top:5rpx;  margin-left: 12rpx;display: block;">{{
																neishi.num }}</text><text class='waiguan-line'></text>
													</view>
													<view>

													</view>

												</view>

											</view>
										</uni-col>
									</uni-row>
								</view>

								<view class='box-cont-btn-flex'>
									<view class='reset-btn' @click.stop='reset'>重置</view>
									<view class='examine-btn' @click.stop='examine(item)'>查看车源</view>
								</view>
							</view>
							<view class="box-cont" v-if="item.open == true && selectID == 2">
								<view class='flex-box1'>
									<view class='left-box'>
										<view class='left-box-name' @click.stop='cityFathreName(city, Cindex, item)'
											v-for='(city, Cindex) in cityArr' :key='city.id' :style='{
												color: CityFatherIndex == Cindex ? "#2D56C5" : ""
											}'>{{ city.name }}</view>
									</view>
									<view class='right-box'>
										<view :style='{
											color: CitySonIndex == Cindex ? "#2D56C5" : ""
										}' class='right-box-name' @click.stop='citySonName(citySon, Cindex, item)'
											v-for='(citySon, Cindex) in conType' :key='citySon.id'>
											<text>{{ citySon.name }} </text>
											<text style="padding-right: 10rpx;">{{ citySon.num }}条</text>
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="shodoaw" @click="yinyingbufen" v-if="itemList.some(items => items.open == true)"></view> -->
			<!-- 列表 -->
		
				<scroll-view scroll-y="true"  refresher-enabled class="scroll-view" 
				@refresherrefresh="onRefresh"
				:refresher-triggered="triggered"
				>
					<view class='newEnergyList' v-if="VehicleModelList.length > 0">
					<view @longtap="touchstartLista" @touchend="touchendLista" class='newEnergyListBox' v-for="(item, index) in VehicleModelList" :key='item.id'
						@click="detailCar(item)">
						<view class='newEnergyList-title'>
							<view class='newEnergyList-title4'>
								{{ item.cars_name }}
							</view>
							<view class='newEnergyList-img1'>
								<!-- <image :src="item.url" alt="" /> -->
							</view>
						</view>
						<view class='newEnergyList-title1'>{{ item.cars_type }}</view>
						<view class='newEnergyList-title2' v-if="item.procedures_name">{{ item.procedures_name }}
						</view>
						<view class='newEnergyList-title3'>
							<text class='newEnergyList-text1'>售价:{{ item.price }}</text>
							<text class='newEnergyList-text2' style='margin-left:30rpx'>指导价:{{ item.guide_price }}万</text>
							<text class='newEnergyList-text3'>{{ item.create_time }}</text>
						</view>
					</view>
				</view>
				
				</scroll-view>
				
				
			


			<view v-if="VehicleModelList.length == 0" class='lallList'>
					<image src="@/static/暂无数据.png" />
				</view>

			<view class="bottom-title">
				<view class="bottom1-loader1" v-if="hasMore">
					加载中...
				</view>
				<view class="bottom1-loader2" v-else>

				</view>
			</view>

			<!-- <view v-if='hasMore'>
				<button :style='{
					"marginBottom":"40rpx",
					"zIndex":zindexNum
				}' @click="loadMore" :disabled="loading">加载更多</button>
			</view> -->
		</view>
	</view>
</template>

<script>
import cuCustom from "@/components/custom-nav/cu-custom.vue";
import addressSearchFixed from "@/components/addressSearch/addressSearchFixed.vue";

import {
	getVehicleConditio,
	getEnergyVehicleColour,
	getCity,
	getEnergyVehicleModelList
} from "@/api/newEnergy.js"
export default {
	components: {
		cuCustom,
		addressSearchFixed,
	},
	data() {
		return {
			isF:false,
			isflaga:false,
			styleObjFlag: {
				background: '',
			},
			triggered:false,
			flagBtn: false,
			flagBtn1: false,
			CustomBar: this.CustomBar,
			SeachBar: this.SeachBar,
			disabled: false,
			zindexNum: 1,
			show: false,
			AllVehicUname: '',
			waiguanIndexs: -1,
			neishiIndexs: -1,
			CityFatherIndex: undefined,
			CitySonIndex: undefined,
			selectID: undefined,
			AllVehic: {},
			waiguanItems: {},
			VehicleModelList: [],
			conType: [],
			neishiItems: {},
			cityItemsA: {},
			cityArr: [],
			objSelect: {},
			AppearanceStyle: {},
			examineAppInter: {}, // 外观和内饰id
			modelObj: {}, // 车型id
			CityObj: {}, // 城市id
			itemList: [{
				subnum: '全部类型',
				open: false,
				disabled: true
			},
			{

				subnum: '外观',
				subnum1: '内饰',
				open: false
			},
			{
				subnum: '全部地区',
				open: false
			}
			],

			loading: false, // 是否正在加载中
			hasMore: false, // 是否还有更多数据
			page_num: 30,  // 条数
			page: 1,  // 页数
			total: 0, // 总数
		}
	},
	onShow() {

	},
	mounted() {

	},
	onReachBottom() {
		console.log(123);
		this.hasMore = true
		let obj = {
			series_two_id: this.objSelect.series_two_id,
			page: this.page,
			page_num: this.page_num
		}
		getEnergyVehicleModelList(obj).then(res => {
			setTimeout(() => {
				const newData = res.data.data
				// 说明数据已经加载完了
				if (this.VehicleModelList.length >= res.data.total) {
					uni.showToast({
						title: '暂无更多数据',
						icon: 'none'
					})
					this.hasMore = false
				} else {
					this.hasMore = true
					this.page++
					this.VehicleModelList = this.VehicleModelList.concat(newData);
				}
			}, 1000)

		})

	},
	mounted() {
		setTimeout(() => {
			this.AppearanceStyle.interior.forEach(item => {
				item.isFlag = false
			})
			this.AppearanceStyle.appearance.forEach(item => {
				item.isFlag = false
			})
		}, 1000)
	},
	onLoad(options) {
		console.log(options, 'getEnergyVehicleModelList');
		this.objSelect = options
		this.getV(options)
		this.getWaiguan(options)
		this.getCity(options)
		this.getEnergyVehicleModelList(options)
	},
	onPullDownRefresh () {

	this.VehicleModelList = []
	//调用获取数据方法
	this.getEnergyVehicleModelList(this.objSelect)
	setTimeout(() => {
	this.page = 1
		//结束下拉刷新
	uni.stopPullDownRefresh ()
	}, 2000);
	},

	methods: {
		touchstartLista() {
            this.isflaga = true
            // this.getList(this.objSelect)
            this.getEnergyVehicleModelList(this.objSelect)
          
        },
        touchendLista() {
         
            this.isF = false
        
        },
		onRefresh() {
			let that = this
			setTimeout(() => {
					this.page = 1;

					if(!this.triggered) {
						this.triggered = true
						setTimeout(() => {
							that.triggered = false
						})
					}
					this.getEnergyVehicleModelList(this.objSelect)
		
				}, 800);
		},
		yinyingbufen() {
           for(let i = 0 ; i < this.itemList.length ; i++) {
               this.itemList[i].open = false
           }
        },
		// 全部车型xuanze
		quanbuchexingm(items, itemPpen) {
			let obj = {
				model_two_id: ''
			}
			this.modelObj = obj
			this.AllVehicUname = items.name.length > 10 ? items.name.slice(11, 19) + '...' : items.name
			itemPpen.open = false
			this.getEnergyVehicleModelList(this.objSelect)
		},
		detailCar: function (data) {
			console.log('详情===', data);
			uni.navigateTo({
				url: "/pages/home/newCar/newCarDetail/newCarDetail?id=" + data.id
			})
		},
		// 搜索
		event_clickSearchBtn(objs) {
			console.log('搜素');
			
		},
		// 省级
		cityFathreName(items, index, itemsOpen) {
			console.log(items, '省级');

			this.CityFatherIndex = index
			if (index != 0) {
				this.conType = items.children.length > 0 ? items.children : []
			} else {
				this.conType = []

			}

			//  全部地区单独走一下
			if (items.name == '全部地区') {
				let obj = {
					city_id: items.id
				}
				this.cityItemsA = items
				itemsOpen.open = false
				this.CityObj = obj
				console.log(this.CityObj, '全部地区id');
				this.getEnergyVehicleModelList(this.objSelect)
			}
		},
		// 市级
		citySonName(items, index, itemsOpen) {
			console.log(items);
			let obj = {
				city_id: items.id
			}
			this.CityObj = obj
			this.cityItemsA = items
			this.CitySonIndex = index
			itemsOpen.open = false
			this.getEnergyVehicleModelList(this.objSelect)
		},
		// 查看车源
		examine(openItems) {
			let obj = {
				appearance_id: this.waiguanItems.id || '', // 外观id
				interior_id: this.neishiItems.id || '' // 内饰id
			}
			this.examineAppInter = obj
			this.getEnergyVehicleModelList(this.objSelect)
			openItems.open = false
		},
		// 重置
		reset() {
			// 外观
			this.waiguanIndexs = -1

			this.waiguanItems = {}
			// 内饰
			this.neishiIndexs = -1
			this.neishiItems = {}

			this.AppearanceStyle.interior.forEach(item => {
				item.isFlag = false
			})
			this.AppearanceStyle.appearance.forEach(item => {
				item.isFlag = false
			})
		},
		// 外观按钮
		activeWaiguan(items, index) {
			console.log(items, 'items');
			for (let i = 0; i < this.AppearanceStyle.interior.length; i++) {
				if (i != index) {
					this.AppearanceStyle.interior[i].isFlag = false;
				}
			}
			this.AppearanceStyle.interior[index].isFlag = !this.AppearanceStyle.interior[index].isFlag
			if (items.isFlag == false) {
				this.waiguanItems = {}
			} else {
				this.waiguanItems = items
			}

			this.waiguanIndexs = index

		},
		// 内饰按钮
		activeNeishi(items, index) {
			for (let i = 0; i < this.AppearanceStyle.appearance.length; i++) {
				if (i != index) {
					this.AppearanceStyle.appearance[i].isFlag = false;
				}
			}
			this.AppearanceStyle.appearance[index].isFlag = !this.AppearanceStyle.appearance[index].isFlag
			if (items.isFlag == false) {
				this.neishiItems = {}
			} else {
				this.neishiItems = items
			}


			this.neishiIndexs = index

		},
		// 选择地区
		activeCity(cityItems, openItems) {
			console.log(cityItems.name);
			this.cityItemsA = cityItems
			openItems.open = false
		},
		// 车源
		getEnergyVehicleModelList(items) {
			console.log(items, 'itemsitemsitemsitems');
			if ( this.page == 1 && this.isflaga) {
					this.triggered = true
				}
			let obj = {
				page_num: this.page_num, // 条数
				page: this.page, // 页数
				series_two_id: items.series_two_id, // 二级车型id
				city_id: this.CityObj.city_id || '', // 省级id
				interior_id: this.examineAppInter.interior_id || '', //内饰id
				appearance_id: this.examineAppInter.appearance_id || '', // 外观id
				model_two_id: this.modelObj.model_two_id || '', // 车型id
			}
			console.log(obj, '所有传参属性');
			getEnergyVehicleModelList(obj).then(res => {
				console.log(res.data, '车源列表');
				if(this.page == 1 && this.isF) {
					this.triggered = false
				}
				this.VehicleModelList = res.data.data
				this.total = res.data.total
				// setTimeout(() => {
				// 	// const newData = res.data.data  /* 从服务器或本地获取新数据 */
				// 	// console.log(newData, 'newData');
				// 	if (this.page_num > this.total) {
				// 		this.hasMore = false;
				// 		return 
				// 	} else {
				// 		this.hasMore = true
				// 		// that.VehicleModelList = that.VehicleModelList.concat(newData);
				// 		// that.page++;
				// 	}
				// 	// this.loading = false;
				// }, 1000);

			})
		},
		// 外观
		getWaiguan(items) {
			getEnergyVehicleColour(items).then(res => {
				console.log(res.data, '外观');
				this.AppearanceStyle = res.data
				console.log(this.AppearanceStyle, '123123');
			}).catch(err => {
				console.log(err);
			})
		},
		// 城市
		getCity(items) {
			getCity(items).then(res => {
				console.log(res, '城市');
				this.cityArr = res.data
			}).catch(err => {
				console.log(err);
			})
		},
		// 全部车型
		getV(items) {
			
			console.log(items, '获取地区');
			let obj ={
				series_two_id:items.series_two_id
			}
			getVehicleConditio(items).then(res => {
				console.log(res.data, '全部车型');
				this.AllVehic = res.data
			}).catch(err => {
				console.log(err);
			})
		},
		// 全部车型-帅选
		AllVehiconclick(items, itemPpen) {
			console.log(items.id);
			let obj = {
				model_two_id: items.id
			}
			this.modelObj = obj
			this.AllVehicUname = items.name.length > 10 ? items.name.slice(11, 19) + '...' : ''
			itemPpen.open = false
			this.getEnergyVehicleModelList(this.objSelect)
			// this.$set(this.person, "score", "60");
			// 		this.$set(this.itemList , 0, {
			// 			subnum: '全部类型',
			// 			body: [{
			// 				msg: '111',
			// 				num: '3'
			// 			}],
			// 			open: false,
			// 			disabled: true
			// 		})


		},
		togglePanel() {
			this.panelOpen = !this.panelOpen; // 切换展开/收起状态
		},
		changeContent(item, index) {
			console.log(item, 'open');
			this.selectID = index

			console.log(this.itemList, 'itemList');
			console.log(item, 'item');
			this.itemList.forEach(i => {
				if (i.open !== this.itemList[index].open) {
					i.open = false;
				}
			});


			item.open = !item.open
		}


	}
}
</script>

<style lang='scss' scoped>
.newCar-page {
	display: flex;
	flex-direction: column;
	width: 100%;
	.animate {
                    animation: slideDown 0.3s cubic-bezier(0.46, 0.35, 0.23, 0.27) forwards;
                    /* 使用动画效果 */

                }

                @keyframes slideDown {
                    0% {
                        opacity: 0;
                        height: 0;
                        /* 初始高度为0 */
                    }

                    100% {
                        opacity: 1;
                        height: auto;
                        /* 最终高度 */
                    }
                }

	.newEnergy-backgourd {
		// background-color: #fff;
		height: auto;
		position: fixed;
		width: 100%;
		// padding: 0rpx 30rpx;
		// position: relative;
		.bottom-title {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 40rpx;
		}


		.newEnergy-collapa {
			background-color: #fff;
			position: absolute;
			width: 100%;
			left: 0rpx;
		}
		.scroll-view{
			height: calc(100% - 90rpx);
		}
		.newEnergyList {
			padding: 20rpx 30rpx;
			// overflow: auto;
			/* margin-top: 12rpx; */
			box-sizing: border-box;
			// height: 1200rpx;
			overflow: auto;

			// height: 100vh;
			.newEnergyListBox {
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 14rpx;
				padding: 30rpx 19rpx;
				z-index: 1;

				.newEnergyList-title {
					// margin-bottom: 20rpx;

					//  display: flex;
					.newEnergyList-title4 {
						//  width: 417rpx;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// white-space: nowrap;
						// width: 680rpx;
						font-weight: 800;
						color: #000000;

						font-size: 28rpx;
						font-family: PingFang SC;

					}

					.newEnergyList-img1 {
						padding-left: 20rpx;
						width: 28rpx;
						height: 24rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

				}

				.newEnergyList-title1 {
					margin-bottom: 20rpx;
					height: 23rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.newEnergyList-title2 {
					margin-bottom: 20rpx;
					height: 20rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				.newEnergyList-title3 {
					.newEnergyList-text1 {
						height: 31rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #EC4B4B;
					}

					.newEnergyList-text2 {

						height: 20rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
					}

					.newEnergyList-text3 {

						height: 16rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						float: right;
						padding-top: 10rpx;
					}
				}

			}
		}

		.lallList {
			position: fixed;
			width: 497rpx;
			height: 379rpx;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			image {
				width: 100%;
				height: 100%;
			}
		}
		.shodoaw {
            background-color: black;
            opacity: 0.2;
            position: fixed;
            top: 350rpx;
            left: 0;
            height: 100%;
			z-index: 1;
            width: 100%;
        }

		.newEnergy-flex {
			display: flex;
			justify-content: space-around;
			/* position: fixed; */
			background-color: #fff;
			z-index: 999;
			/* top: 250rpx; */
			width: 100%;
			left: 0rpx;

			.collapse {
				line-height: 87rpx;

				.sub-title {}

				.box {
					position: absolute;
					left: 0;
					width: 100%;
					background-color: #fff;

					.cityName {
						width: 107rpx;
						height: 26rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
					}

					.box-cont-btn-flex {
						display: flex;
						justify-content: space-between;
						padding: 20rpx 30rpx;

						.reset-btn {
							width: 274rpx;
							height: 80rpx;
							background: #F2F2F2;
							border-radius: 14rpx;
							text-align: center;
							line-height: 80rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #000000;

						}

						.examine-btn {
							width: 400rpx;
							height: 80rpx;
							line-height: 80rpx;
							background: #0E59EA;
							border-radius: 14rpx;
							text-align: center;
							color: #fff;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
						}
					}

					.waiguan-flex {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
					}

					.waiguan-title {

						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #000000;
					}

					.active-btn-color {
						background: #0E59EA !important;

						text {
							color: #fff !important;
						}

						.waiguan-title-style::before {
							content: '';

							position: absolute;
							height: 2rpx;
							right: 0rpx;
							bottom: 25rpx;
							background: #fff !important;
						}

						.waiguan-title-style::after {
							content: '';

							position: absolute;
							height: 2rpx;
							left: 0rpx;
							bottom: 25rpx;
							background: #fff !important;
						}
					}

					.activeRese-btn-color {
						background: #F7F8FA !important;
					}

					.waiguan-btn {
						margin-right: 10rpx;
						height: 80rpx;
						background: #F7F8FA;
						border-radius: 40rpx;
						text-align: center;

						.waiguan-title-style {

							padding: 15rpx 0rpx;

							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #000000;
							line-height: 26rpx;
							position: relative;

						}

						.waiguan-title-style::before {
							content: '';
							width: 15rpx;
							position: absolute;
							height: 2rpx;
							right: 50rpx;
							bottom: 25rpx;
							background: black;
						}

						.waiguan-title-style::after {
							content: '';
							width: 15rpx;
							position: absolute;
							height: 2rpx;
							left: 60rpx;
							bottom: 25rpx;
							background: black;
						}
					}

					.flex-box1 {
						display: flex;
						padding: 0rpx 30rpx;
						z-index: 999;

						.left-box {
							width: 200rpx;
							height: 964rpx;
							z-index: 2;
							background: #FFFFFF;

							.left-box-name {
								border-bottom: 2rpx solid #F2F2F2;
							}
						}

						.right-box {
							z-index: 2;
							width: 546rpx;
							height: 964rpx;
							background: #FFFFFF;
							box-shadow: -4rpx 0 6rpx -2rpx #999999;

							.right-box-name {
								padding-left: 20rpx;
								border-bottom: 2rpx solid #F2F2F2;
								display: flex;
								justify-content: space-between;
							}
						}
					}

					.allchexingm{
						padding: 0rpx 30rpx;
						display: flex;
						justify-content: space-between;
						
						border-bottom: 2rpx solid #F2F2F2;
						.allchexingm-text1{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #000000;
							width: 600rpx;
							overflow: hidden;

							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.allchexingm-text2{
							width: 51rpx;
							height: 23rpx;
							font-size: 24rpx;
							font-family: PingFangSCRegular;
							font-weight: 400;
							color: #999999;
						}
						
					}
					.flex-box {
						display: flex;
						padding: 0rpx 30rpx;
						justify-content: space-between;
						border-bottom: 2rpx solid #F2F2F2;
						height: 100rpx;
						line-height: 100rpx;

						.flex-title {


							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #000000;
							width: 600rpx;
							overflow: hidden;

							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.flex-num {
							width: 51rpx;
							height: 23rpx;
							font-size: 24rpx;
							font-family: PingFangSCRegular;
							font-weight: 400;
							color: #999999;
						}
					}

				}
			}


		}
	}

}</style>
